import { vw, vh } from "@/common/dimensions";
import globalStyles from "@/common/styles/globalStyles";
import React, { useState } from "react";
import {
	Image,
	Pressable,
	StyleSheet,
	Text,
	TextInput,
	View,
} from "react-native";

export default function InputViewRow(props: {
	isPassword?: boolean;
	label: string;
    onChangeText:Function;
    value:string
}) {
	const { label, isPassword = false , onChangeText ,value } = props;
	const [showPassword, setShowPassword] = useState<boolean>(true);
	const changeShowPassword = () => {
		showPassword ? setShowPassword(false) : setShowPassword(true);
	};
	return (
		<View
			style={[
				styles.inputViewRow,
				globalStyles.rowLine,
				globalStyles.aiCenter,
				globalStyles.jcSB,
			]}
		>
			<View style={[globalStyles.rowLine, globalStyles.aiCenter]}>
				<Text style={styles.label}>{label}</Text>
				<TextInput
					style={styles.input}
					placeholder={label === "账号" ? "*请输入至少3位数字、字母的组合~" :"*请输入至少6位数字、字母的组合~"}
					secureTextEntry={isPassword ? showPassword : false}
                    onChangeText={(value)=>onChangeText(value)}
                    value={value}
				/>
			</View>
			{isPassword && (
				<Pressable onPressIn={changeShowPassword} onPressOut={changeShowPassword}>
					<Image
						style={{ width: 22, height: 22 }}
						source={
							showPassword
								? require("@/assets/mine/noLook.png")
								: require("@/assets/mine/look.png")
						}
					/>
				</Pressable>
			)}
		</View>
	);
}
const styles = StyleSheet.create({
	inputViewRow: {
		borderBottomColor: "#ececec",
		borderBottomWidth: 1,
		marginTop: 16,
        marginBottom:8,
		paddingBottom: 10,
	},
	label: {
		fontSize: 15,
		fontWeight: "500",
		marginRight: 8,
        width:44,
        textAlign:"center",
        lineHeight:24,
	},
	input: {
		fontSize: 13,
        width:"77%",
        paddingVertical:8,
	},
});
